<template>
  <div :id="'barEcharts' + id" style="height:100%;width:100%"/>
</template>
<script>
    import * as echarts from "echarts";

    export default {
        name: '',
        props: {
            id: {
                type: String,
                default: ''
            },
            data: {
                type: Array,
                default: []
            },
            colorStart: {
                type: String,
                default: ""
            },
            lineColor: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                barEcharts: null,
                chartData:[]
            }
        },
        watch:{
            data(newVal,oldVal){
               this.chartData = newVal;
               this.setChartOption();
            }
        },
        methods: {
            setChartOption(){
                let d = [], days = [];
                //库存
                if (this.id == 1) {
                    this.chartData.map(i => {
                        days.push(i.singDate);
                        d.push(i.abnormalBigDecimal);
                    })
                }
                if (this.id == 3) {
                    this.chartData.map(i => {
                        days.push(i.singDate);
                        d.push(i.singular);
                    })
                }
                if (this.id == 2) {
                    this.chartData.map(i => {
                        days.push(i.singDate);
                        d.push(i.bigDecimal);
                    })
                }

                this.$nextTick(() => {
                    this.barEcharts = echarts.init(document.getElementById('barEcharts' + this.id), "macarons");
                    this.barEcharts.setOption({
                        color: [this.lineColor],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        grid: {
                            top: '4%',
                            left: '3%',
                            right: '4%',
                            bottom: '2%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: days
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: [{
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 2
                            },
                            showSymbol: true,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: this.colorStart

                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 255, 255,.3)'
                                }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: d
                        }]
                    });

                    let that = this;
                    window.addEventListener('resize', () => {
                        that.barEcharts.resize()
                    });
                })
            }
        }
    }
</script>
